import React, {Component, useState, useEffect} from 'react';
function Hooks () {
    const [count, setCount] = useState(0)
    useEffect((e)=>{
      console.log('useEffect-count', e)
      document.title = `you cliked ${count} times`
      // 这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除
      return ()=>{
        console.log('useEffect-count-清除')
        setFruit(0)
        console.log('fruit', fruit)
      }
    })

    // 逻辑解耦，有点像mixins
    const [fruit, setFruit] = useState(1)
    useEffect(()=>{
      console.log('effect-fruit', fruit)
    })
    return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1 )}>
            Click me
          </button>
        </div>
    )
}


  export default Hooks;